<template>
  <div>
    <el-upload
      class="upload-demo"
      action="http://47.106.222.181:9990/work/photo/add"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      multiple
      :headers="{
        token: '',
      }"
      :http-request="confirem"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
  </div>
</template>

  <script>
import { getPhotoAddApi } from "@/wss/newApi_3-24/imageAdmin.js";

export default {
  props: {
    labelId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      fileList: [],
      base64List: [],
      imageUrl: "",
      // 预览图片
      showList: [],
      // 文件列表
      paramsList: [],
      preview: {
        src: "",
      },
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    readAsDataURLFn(file, id) {
      // let base64 = undefined;
      var reader = new FileReader();
      reader.addEventListener(
        "load",
        () => {
          this.base64List.push({ base64: reader.result, uid: id });
          console.log(this.base64List, "js");
        },
        false
      );

      if (file) {
        reader.readAsDataURL(file);
      }
      console.log(reader.DONE);
    },
    beforeUpload(file) {
      console.log(file);
      return;
      console.log(file, "外网");
      // 预览
      this.showList.push({ id: file.uid, url: URL.createObjectURL(file) });
      this.readAsDataURLFn(file, file.uid);
      this.paramsList.push(file);
    },
    // 上传图片
    async confirem({ file }) {
      console.log(file);
      this.readAsDataURLFn(file);
      return;
      setTimeout(async () => {
        let s = new Set(["jpg", "jpeg", "png"]);
        let { base64List } = this;

        let paramsList = JSON.parse(JSON.stringify(this.paramsList));
        console.log(paramsList);
        if (paramsList.length > 30) {
          this.$message({
            message: "最大一次只可以上传30张",
            type: "warning",
          });
          return;
        }
        // 长度为0时直接退出
        if (paramsList.length == 0) {
          this.$message({
            message: "上传不可以为空哦",
            type: "warning",
          });
          return;
        }
        let i = 0;
        let length = paramsList.length;
        console.log(paramsList);
        // 数据转换
        do {
          // 判断是否大于2M
          if (paramsList[i].size >= 2097152) {
            this.$message({
              message: "不可以大于2M",
              type: "warning",
            });
            return;
          }
          paramsList[i].labelId = this.labelId;
          paramsList[i].format = "." + paramsList[i].name.split(".")[1];
          paramsList[i].name = paramsList[i].name.split(".")[0];
          // 判断格式
          if (!s.has(paramsList[i].format.split(".")[1])) {
            this.$message({
              message: "格式不支持",
              type: "warning",
            });
            return;
          }
          // 文字超过60就不可上传
          if (paramsList[i].name.length > 60) {
            this.$message({
              message: "图片名字不可以超过60",
              type: "warning",
            });
            return;
          }
          base64List.forEach((v) => {
            if (paramsList[i].uid == v.uid) {
              paramsList[i].base64 = v.base64.split(",")[1];
            }
          });
          i++;
          length--;
        } while (length > 0);
        console.log(paramsList, "可以试用了吗");

        let { code, msg } = await getPhotoAddApi(paramsList);
        if (code == 200) {
          this.$emit("on-getPictrue", "upload", this.labelId);
          this.close();

          this.$message({
            message: msg,
            type: "success",
          });
        }
        this.fileList = [];
      }, 1000);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style>
</style>